/*
	PAGES
*/


/* Login */

$(document).ready(function() {
	$("#password").prop("disabled", true);
	$("#submit").prop("disabled", true);

	$("img.loginLogo").delay(200).animate({top: "38%", opacity: "1", height:"24%"}, 400);
	$("img.loginLogo").animate({top: "60px", height:"120px"}, 400);

	$("#email").delay(500).animate({top: "-20px", opacity: "1"}, 500);
	$("#userLabel").delay(500).animate({top: "49px", opacity: "1", height: "66px", width: "66px"}, 500);
	$("#password").delay(550).animate({top: "-50px", opacity: "0.2"}, 500);
	$("#passwordLabel").delay(550).animate({top: "19px", opacity: "0.2", height: "66px", width: "66px"}, 500);
	$("#submit").delay(550).animate({opacity: "0"}, 500);

    $("#email").keyup(function() {
		if(/[a-z]{2,}[@][a-z]{2,}[.][a-z]{2,}/.test($(this).val())) {
			$("#password").prop("disabled", false);
			$("#password").stop().animate({opacity: "1"}, 250);
			$("#passwordLabel").stop().animate({opacity: "1"}, 250);
		}
		else {
			$("#password").prop("disabled", true);
			$("#password").stop().animate({opacity: "0.2"}, 250);
			$("#passwordLabel").stop().animate({opacity: "0.2"}, 250);
			$("#password").val("");
		}
	});

    $("#password").keyup(function() {
    	if($(this).val().length != 0) {
			$("#submit").prop("disabled", false);
			$("#submit").stop().animate({top: "-16px", opacity:"1"}, {duration: 250, queue: false});
		}
		else {
			$("#submit").prop("disabled", true);
			$("#submit").stop().animate({top: "-6px", opacity:"0"}, {duration: 250, queue: false});
		}
	});



	function ajaxFormOutput(outputLocation, output){
		outputLocation.stop().animate({top: "0px", opacity:"1"}, {duration: 250, queue: true}).delay(5000).animate({top: "-120px", opacity:"0"}, {duration: 250, queue: true});
		outputLocation.html(output);
	}

	function ifSuccess(redirectTo, delay){
		$("#email").delay(200).fadeOut(200);
		$("#userLabel").delay(200).fadeOut(200);
		$("#password").delay(100).fadeOut(300);
		$("#passwordLabel").delay(100).fadeOut(300);
		$("#submit").fadeOut(400);
		$("img.loginLogo").delay(100).animate({top: "5px", height:"90px"}, 400);
		$("div.loginBg").delay(100).animate({height: "100px"}, 400);
		setTimeout(function(){
			$("div.content").load("./" + redirectTo + ".php div.contentBody")
		}, delay)
	}


	$("#submit").click(function ajaxForm(){
		form = $('#loginForm');
		action = "./action/login.php";
		data = form.serialize();
		output = $("#formFeedback");

		$.ajax({
			type: "POST",
			url: action,
			data: data,
			success: function(result){
				if(/success/i.test(result))
				{
					ifSuccess("home", 150)
				}
				else
				{
					ajaxFormOutput(output, "<p style='color:red;'>" + result + "</p>")
				}
			},
			beforeSend: function(){
				output.html("<p style='color:white;'>Loading...</p>");
			}
		});
		return false;
	});

});
